<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="javax.jdo.PersistenceManager" %>
<%@ page import="com.google.enterprise.gsa.crf.*" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	    <style>
			body {
				font-family: arial, sans-serif;
				background-color:#fff;
				font-size: small;
				margin: 24px 8px 8px;
				color:#000;
			}
			#header {
				position: relative;
				height:50px;
				margin:0 0 11px;
			}
			#logo {  /* in header */
				float:left;
				width: 175px;
				top:-5px;
				left:0;
				padding:0;
				margin:0;
				position:absolute;
			}
			#hints {  /* in header */
				margin:5px 0 0 174px;
				padding:1px 0 1px 3px;
			
			}
			h1, h2, h3, h4, h5 {
				font-weight:bold;
				margin-bottom:0;
			}
			h1 {
				font-size:large;
				font-weight:bold;
				border-top: 1px solid;
				background-color: #e5ecf9;
				border-color: #3366CC;
				margin:5px 0 0 174px;
				padding:1px 0 1px 3px;
			}
			h2 {
				font-size:120%;
				margin-top:1.5em;
				border-bottom: 1px solid;
				border-color: #3366CC;
			}
			h3 {
				font-size:110%;
				margin-top:.7em;
				left:0;
				top:.7em;
			}
			form {
				margin:0;
				padding0;
			}
		</style>
	    <title>
	      Google Search Appliance Dashboard
	    </title>
	    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
	    <script type="text/javascript">
	      google.load('visualization', '1', {packages: ['table']});
	    </script>
	    <script type="text/javascript">
		    function drawVisualization() {
		        // Create and populate the data table.
		        var data = new google.visualization.DataTable();
		        data.addColumn('string', 'Query');
		        data.addColumn('number', 'Frequency');
		        <%
		        PersistenceManager pm = PMF.get().getPersistenceManager();
		        String query = "select from " + DBQueryFrequency.class.getName() + " order by frequency desc";

		        List<DBQueryFrequency> records = (List<DBQueryFrequency>) pm.newQuery(query).execute();
		        if (records.isEmpty()) {
		        } else {
		        	out.println("data.addRows(" + records.size() + ");");
		        	int i = 0;
		            for (DBQueryFrequency cr : records) {            
		            	out.println("data.setCell(" + i + ", 0, '" + cr.getQuery() + "');");
		            	out.println("data.setCell(" + i + ", 1, " + cr.getFrequency() + ");");
		            	i++;
		            }
		        }
		        pm.close();
		    	%>
		    		    			      
		        // Create and draw the visualization.
		        var visualization = new google.visualization.Table(document.getElementById('table'));  		        
//		        visualization.draw(data, null);

		        var formatter = new google.visualization.TableBarFormat({width: 120});
		        formatter.format(data, 1); // Apply formatter to second column
		          
		        visualization.draw(data, {allowHtml: true, showRowNumber: true});

		        
		      }
		      
		      google.setOnLoadCallback(drawVisualization);
	      </script>
	</head>
	<body style="font-family: Arial;border: 0 none;">
	<div id="header">
		<div id="logo"><a href="http://code.google.com/"><img src="http://code.google.com/images/code_sm.png" border="0" alt="Return to Google Code homepage" /></a></div>
		<h1 id="doc_title">Google Search Appliance reporting tool</h1>
		<table>
			<tr>
				<td>
				<br />
					<h2>Queries frequency</h2>
					<br />
					<div id="table"></div>
				</td>
			</tr>
		</table>
	</div>
	</body>
</html>